<template>
    <div class="box">
        <header-tit tit="需求管理"/>
        <div class="top">
            <div class="add">
                <el-button type="primary" @click="$router.push('/needDetail?')">新增</el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%">
            <!--<el-table-column type="selection" width="55"></el-table-column>-->
            <el-table-column label="姓名" prop="customerName"></el-table-column>
            <el-table-column label="手机号" prop="customerPhone"></el-table-column>
            <el-table-column label="车系" prop="vehicleSeries"></el-table-column>
            <el-table-column label="车型" prop="vehicleModel"></el-table-column>
            <el-table-column label="备注" prop="mark"></el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <img class="img" :src="scope.row.adUrl" alt>
                </template>
            </el-table-column>
            <el-table-column label="下单时间" prop="createdAt"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="$router.push('/needDetail?id='+scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteNeed(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pat">
            <el-pagination
                    v-if="count"
                    background
                    layout="prev, pager, next"
                    :page-size="filter.limit"
                    @current-change="currentPage"
                    :total="count"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
  import { BaseConfig, Account } from "api"

  const RuleForm = function () {
    return {
      customerName: "",
      customerPhone: "",
      vehicleSeries: "",
      vehicleModel: "",
      mark: "",
      createdAt: "",
    }
  }

  export default {
    data () {
      return {
        tableData3: [],
        filter: {
          offset: 0,
          limit: 10,
          status: "ALL"
        },
        ruleForm: null,
        diaLog: false,
        rules: {
          adUrl: [
            { required: true, message: "请上传新广告图片", trigger: "change" }
          ],
          desc: [
            { required: true, message: "请输入显示描述", trigger: "change" }
          ],
          redirectUrl: [
            { required: true, message: "请输入访问url", trigger: "change" }
          ],
          order: [
            { required: true, message: "请输入显示顺序", trigger: "change" }
          ],
          status: [
            { required: true, message: "请选择是否启用", trigger: "change" }
          ]
        },

        count: 0
      }
    },

    async created () {
      this.queryNeed()
    },

    methods: {
      async queryNeed () {
        let res = await BaseConfig.queryBanner(this.filter)
        this.tableData3 = res.data
        // this.tableData3 =[new RuleForm()]
        // this.count = res.count
      },

      async deleteNeed (id) {
        await this.$confirm("确认要执行此操作吗")
        await BaseConfig.deleteNeed(id ? [id] : this.ids)
        this.queryNeed()
      },

      successFile (e) {
        this.ruleForm.adUrl = this.$store.state.Account.QnInfo.domainName + e.key
      },

      currentPage (e) {
        this.filter.offset = e * this.filter.limit - 1
        this.queryBanner()
      },
    }
  }
</script>
<style lang="less" scoped>
    .add {
        color: #656565;
        font-size: 15px;
        text-align: right;
        margin: 20px 0;
        margin-right: 20px;
        padding: 20px;
    }
    .top {
        margin-top: 20px;
        background: white;
    }
    .blue {
        color: rgb(90, 170, 220);
    }
    .red {
        color: rgb(245, 90, 85);
    }
    .btn {
        width: 0.9rem;
    }
    .el-dialog {
        background: #f5f8fd;
    }
    .img_box {
        width: 1.64rem;
        height: 1.23rem;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(191, 191, 191, 1);
        position: relative;
        margin: auto;
    }
    .img_box > div {
        text-align: center;
        .tit_font {
            text-align: center;
            width: 100%;
        }
        input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    }
    .img {
        width: 100px;
        height: 100px;
    }
    .cell{
        button{
            padding: 7px 13px;
        }
    }
</style>
